<!DOCTYPE html>
<html>
	<head>

		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="stylesheet" href="css/bootstrap.3.4.1.css">
		<link rel="stylesheet" href="css/main.css">
		<title> demo </title>
	</head>

	<!-- 
	 
	 
	 
	 局部导航 
	 导航 表/14.5
	 https://biaoyansu.com/14.5
	 
	 
	 
	 
	 -->
	<body>

		<h1>
			demo
		</h1>




		<ul class="nav nav-tabs">
			<li role="presentation"><a href="#">Home</a></li>
			<li role="presentation" class="active"><a href="#">Profile</a></li>
			<li role="presentation"><a href="#">Messages</a></li>
		</ul>





		<br>
		<br>
		<p>平均分布 </p>
		<ul class="nav nav-tabs nav-justified">
			<li role="presentation"><a href="#">Home</a></li>
			<li role="presentation" class="active"><a href="#">Profile</a></li>
			<li role="presentation"><a href="#">Messages</a></li>
		</ul>



		<br>
		<br>


		<ul class="nav nav-pills">
			<li role="presentation" class="active"><a href="#">Home</a></li>
			<li role="presentation"><a href="#">Profile</a></li>
			<li role="presentation"><a href="#">Messages</a></li>
		</ul>


		<br>
		<br>




		<div class="row">

			<div class="col-xs-4">
				<ul class="nav nav-pills nav-stacked">
					<li role="presentation" class="active"><a href="#">Home</a></li>
					<li role="presentation"><a href="#">Profile</a></li>
					<li role="presentation"><a href="#">Messages</a></li>
				</ul>
			</div>
			<div class="col-xs-8">

				<div>
					<h1> Home </h1>

					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque adipisci quas rerum illum eos
						tenetur nam id quod cum dignissimos eum repellendus provident cupiditate ducimus veniam saepe
						illo voluptatem fugiat.</p>


				</div>
			</div>



		</div>


	</body>
</html>
